<template>
	<view class="upload-wrapper" @click="uploadBankCard">
		<img class="upload-bg" :src="formData.image ||
			'https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/bg-card-bank.png'
			" />
		<view class="upload-button" v-if="!formData.image">
			<image class="upload-img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-upload-bank.png" />
			<view class="upload-text">点击拍摄或上传信用卡</view>
		</view>
	</view>

	<view class="form-wrapper">
		<view class="row">
			<view class="label"><text>*</text>信用卡号</view>
			<input v-model="formData.cardNo" type="number" :placeholderStyle="placeholderStyle" :maxlength="19"
				@input="noChange" placeholder="自动识别，可修改" class="value" style="width: 80%" />
		</view>
		<view class="divider" />

		<view class="row">
			<view class="label"> <text>*</text>预留手机号 </view>
			<input v-model="formData.phone" :placeholderStyle="placeholderStyle" @input="nameChange"
				placeholder="请输入手机号" class="value" />
			<!-- <text class="getCode" slot="right" @click="getCode">获取验证码</text> -->
			<button @click="sendCode('CREDIT_CARD', formData.phone)" :disabled="isSend" size="mini" class="getCode"
				type="primary">
				{{ buttonText }}
			</button>
		</view>
		<view class="divider" />
		<view class="row">
			<view class="label"><text>*</text>验证码</view>
			<input v-model="formData.code" :placeholderStyle="placeholderStyle" @input="nameChange" placeholder="请输入验证码"
				class="value" />
		</view>
	</view>

	<button @click="submitEvent" class="submitButton">下一步</button>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { onlyNumberReg, onlyCnReg } from "@/utils/regExp";
import useVerifyCode from "@/hook/useVerifyCode";
import {
	queryBankCardInfo
} from "@/api/common";
import { createMerchant, queryMerchants } from "@/api/mine"
import { getOsssSignature, uploadImg } from "@/utils/upload";
import { showToast } from "@/utils/toast";
// 注册发送验证码hook
const [{ buttonText, isSend }, { sendCode }] = useVerifyCode("发送验证码");
// OSS签名
let ossConfig = ref({});
// 提示文字样式
const placeholderStyle = "color: #999999;";

// 表单数据
let formData = ref({
	image: "", // 信用卡照片
	cardNo: "", // 信用卡号
	phone: "", // 预留手机号
	code: "", // 验证码
});
// 商户类型
let type = ref(null)
// 设备sn
let currentSn = ref(null)
// 接收创建商户数据
let infomation = ref(null)
onLoad(async (params) => {
	console.log("params888888888", params)
	if (params.info) { // 函数可把字符串作为 URI 组件进行编码
		let obj = JSON.parse(params.info)
		console.log("obj-obj", obj)
		infomation.value = obj
		console.log("infomation.value", infomation.value)
	}
	type.value = params.type
	currentSn.value = params.sn
	console.log("currentSn.value-currentSn.value", currentSn.value)
	// oss签名配置
	ossConfig.value = await getOsssSignature("agent");
});

// 是否提交中
let loading = ref(false);
// 提交表单
function submitEvent() {
	console.log("infomation.value", infomation.value)
	let obj = {
		baseInfo: {
			storeInfo: {
				type: type.value,
				storeName: infomation.value.businessInformation ? infomation.value.businessInformation.registerName : '商户' + '_' + infomation.value.corporateInformation.name,
				licenseImg: infomation.value.businessInformation ? infomation.value.businessInformation.licenseImage : '',
				licenseNo: infomation.value.businessInformation ? infomation.value.businessInformation.licenseNo : '',
				licenseBegin: infomation.value.businessInformation ? infomation.value.businessInformation.licenseBegin : '',
				licenseEnd: infomation.value.businessInformation ? infomation.value.businessInformation.licenseEnd : '',
				longTermLicense: infomation.value.businessInformation ? infomation.value.businessInformation.longTermLicense : '',
				operateProvinceCode: infomation.value.businessInformation ? infomation.value.businessInformation.provinceId : '',
				operateCityCode: infomation.value.businessInformation ? infomation.value.businessInformation.cityId : '',
				operateDistrictCode: infomation.value.businessInformation ? infomation.value.businessInformation.areaId : '',
				operateAddress: infomation.value.businessInformation ? infomation.value.businessInformation.registerAddress : '',
				mccId: infomation.value.businessInformation ? infomation.value.businessInformation.type : ''
			},
			operatorInfo: {
				idCardFront: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardFront : '',
				idCardBack: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardBack : '',
				name: infomation.value.corporateInformation ? infomation.value.corporateInformation.name : '',
				idCardNo: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardNo : '',
				idCardBegin: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardBegin : '',
				idCardEnd: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardEnd : '',
				phone: infomation.value.settlementInformation ? infomation.value.settlementInformation.phone : '',
				handImg: infomation.value.supplementaryInformation ? infomation.value.supplementaryInformation.handleIdCard : '',
				longTermIdCard: infomation.value.corporateInformation ? infomation.value.corporateInformation.longTermIdCard : '',
				idAddress: infomation.value.corporateInformation ? infomation.value.corporateInformation.idAddress : ''
			},
			operatorPhoto: {
				storefrontImg: infomation.value.supplementaryInformation ? infomation.value.supplementaryInformation.image : '',
				premisesImg: infomation.value.supplementaryInformation ? infomation.value.supplementaryInformation.interiorImage : '',
				ashierImg: infomation.value.supplementaryInformation ? infomation.value.supplementaryInformation.cashierImage : ''
			}
		},
		settlementInfo: {
			settleBankCardImg: infomation.value.settlementInformation ? infomation.value.settlementInformation.image : '',
			accountName: infomation.value.settlementInformation ? infomation.value.settlementInformation.name : '',
			cardNo: infomation.value.settlementInformation ? infomation.value.settlementInformation.cardNo : '',
			bankId: infomation.value.settlementInformation ? infomation.value.settlementInformation.bankId : '',
			type: 'PRIVATE',
			corporation: true,
			idCardFront: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardFront : '',
			idCardBack: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardBack : '',
			name: infomation.value.corporateInformation ? infomation.value.corporateInformation.name : '',
			idCardNo: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardNo : '',
			idCardBegin: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardBegin : '',
			idCardEnd: infomation.value.corporateInformation ? infomation.value.corporateInformation.idCardEnd : '',
			longTermIdCard: infomation.value.corporateInformation ? infomation.value.corporateInformation.longTermIdCard : '',
			idAddress: infomation.value.corporateInformation ? infomation.value.corporateInformation.idAddress : ''
		},
		otherParam: {
			creditCard: formData.value.cardNo,
			phone: formData.value.phone,
			code: formData.value.code
		},
		settlementRate: {
			period: 'T1',
			ysfCreditCard: infomation.value.settlementRate.ysfCreditCard,
			ysfDebitCard: infomation.value.settlementRate.ysfDebitCard,
			ysf: infomation.value.settlementRate.ysf,
			wechat: infomation.value.settlementRate.wechat,
			alipay: infomation.value.settlementRate.alipay
		},
		sn: currentSn.value
	}
	console.log("obj999", obj)
	createMerchant(obj)
		.then((res) => {
			showToast("创建成功", "none");
			console.log("res-res", res)
			merchantStatus(res.payload.id)
		})
		.catch((err) => {

		});
}

// 姓名
function nameChange(ev) {
	formData.value.name = onlyCnReg(ev.detail.value);
}

// 银行卡号
function noChange(ev) {
	formData.value.no = onlyNumberReg(ev.detail.value);
}

// 上传银行卡
function uploadBankCard() {
	console.log("888888888")
	uploadImg(ossConfig.value)
		.then((res) => {
			formData.value.image = res;

			// 识别银行卡
			return queryBankCardInfo({
				params: {
					url: res,
				},
			});
		})
		.then((res) => {
			const { bankName, cardNum } = res.payload;
			formData.value.cardNo = cardNum;

		})
}
// 查询设备状态
const merchantStatus = (val) => {
	queryMerchants(val)
		.then((res) => {
			console.log("res", res)
			let id = val || '4f58e18c-a414-4cf3-9ef1-65baa1b4cdd7'
			let status = res.payload.state || 'WAIT'
			let sn = res.payload.sn
			let reveal = res.reveal
			uni.navigateTo({
				url: `/pagesLogin/bindSuccess/index?id=${id}&status=${status}&sn=${sn}&reveal=${reveal}`,
			});
		})
		.catch((err) => {

		});
}

</script>

<style lang="scss" scoped>
@import './index.scss';
</style>